<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<style>
#moreCondition {border：1px;
	width: 200px;
	height: 200px;
	float: center;
}

.poStatus .panel .panelHeader {
	margin: 0px;
	border-width: 0px 0px 1px 0px;
	background-color: #fff;
	background-image: none;
	padding-width: 0px;
}

.poStatus .panel .panelHeaderContent h1 {
	border-width: 0px;
}

.orderStateTable tr td {
	text-align: left;
	overflow: hidden;
	padding: 0px 10px;
	vertical-align: middle;
	line-height: 22px;
	height: 22px;
	border-top: solid 1px #f7f7f7;
	border-right: solid 1px #ededed;
}

.orderStateTable tbody tr:first-child td {
	border-top: 0px;
}

.orderStateTable tr td:first-child {
	border-top: solid 1px #f7f7f7;
	border-left: solid 1px #ededed;
	border-right: solid 1px #ededed;
}

.orderStateTable {
	border-bottom: solid 1px #ededed;
}

.orderStateTable tr th:first-child {
	border-color: #DFE4E8;
	border-style: solid;
	border-width: 1px;
}

.orderStateTable tr th {
	text-align: left;
	padding: 0px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 0px;
	white-space: nowrap;
	line-height: 30px;
	border-color: #DFE4E8;
	background-color: #FAFCFC;
	color: #797E80;
	font-weight: bold;
	height: 26px;
}
</style>
<#include "/common/pagerForm.html">
<form name="ProductionControlStatesCondition" rel="pagerForm" method="post" class="required-validate" onsubmit="return navTabSearch(this)">
	<input type="hidden" id="advancedStatus" name="advancedStatus" 	value="${condition.advancedStatus!''}" />
	<div class="pageHeader">
		<div class="searchBar poStatus">
			<ul class="searchContent">
        	<li>
        		<label><@label key='productionControlNum.C,colon'>生产管理号：</@label></label> 
        		<input type="text" name="productionControlNum" value="${condition.productionControlNum!''}" />
        	</li>
        	<li>
                <label>
                    <@label key='materialCode.C,colon'>物料编号：</@label>
                </label>
                <input type="text" name="materialCode" value="${condition.materialCode!''}"/>
            </li>
            <li>
                <label><@label key='productionOrderNum.C,colon'>生产订单编号：</@label></label>
                <input type="text" name="productionOrderNum" value="${condition.productionOrderNum!''}"/>
            </li>
		</ul>
        <ul class="searchContent">
        	<li>
                <label>
                    <@label key='requirementDate.C,colon'>需求日期：</@label>
                </label>
                    <input type="text" readonly="readonly" class="date required from" dateGroup="requirementDate"  size="17"  name="minRequirementDate" value="${condition.minRequirementDate!''}"/>
                    <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a>
            </li>
            <li>
                <label>
                    <@label key="to.C,colon">至：</@label>
                </label>
                <input type="text" class="date required to" readonly="readonly" intervalDay="7" size="17" dateGroup="requirementDate" name="maxRequirementDate"  value="${condition.maxRequirementDate!''}"/>
                <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a>
            </li>
            <li><label><@label key='orderStatusECode.C,colon'>订单状态：</@label></label> 
           		<select name="statuseCode">
						<option value=""><@label key='all.C'>所有</@label></option> <#if controlStatusCode??> <#list controlStatusCode as ecode>
						<option value="${ecode.eCode!''}"<#if condition.statuseCode?? && condition.statuseCode == ecode.eCode> selected</#if> >${ecode.eCodeText!''}</option> </#list> </#if>
				</select>
			</li>
            <li class="query">
                <div class="buttonActive">
                    <div class="buttonContent">
                        <button type="submit">
                            <@label key='query.B'>查询</@label>
                        </button>
                    </div>
                </div>
             </li>
             <li class="advancedQuery">
             	<a class="link">
             		<@label key="advancedQuery.C">高级查询</@label> 
             	</a> <span></span>
			 </li>
        </ul>
		</div>
	</div>
	<div id="collapsablePanel" style="display: none;" class="pageHeader">
		<div class="searchBar poStatus">
			<ul class="searchContent">
	            <li>
	                <label>
	                    <@label key='productionLot.C,colon'>生产批次：</@label>
	                </label>
	                <input type="text" name="productionlotNum"  value="${condition.productionlotNum!''}"/>
	            </li>
	            <li>
	                <label><@label key='materialText.C,colon'>物料名称：</@label></label>
	                <input type="text" name="materialText" value="${condition.materialText!''}"/>
	            </li>
	            <li>
	                <label><@label key='createUser.C,colon'>创建人：</@label></label>
	                <input type="text" name="createUser" value="${condition.createUser!''}"/>
	            </li>
	            <li>
	                <label><@label key='modifyUser.C,colon'>修改人：</@label></label>
	                <input type="text" name="modifyUser" value="${condition.modifyUser!''}"/>
	            </li>
			</ul>
        	<ul class="searchContent">
	            <li>
	                <label><@label key='createDateTime.C,colon'>创建日期从：</@label></label>
	            	<input type="text" class="date" readonly="readonly" size="17" max_Date="{maxCreateDateTime}"  name="minCreateDateTime" value="${condition.minCreateDateTime!''}"/>
	                <a class="inputDateButton" href="javascript:;">选择</a>
	            </li>
	            <li>
	                <label><@label key="to.C,colon">至：</@label></label>
	                <input type="text" class="date" readonly="readonly" size="17" min_Date="{minCreateDateTime}" name="maxCreateDateTime"  value="${condition.maxCreateDateTime!''}"/>
	                <a class="inputDateButton" href="javascript:;">选择</a>
	            </li>
	            <li>
	                <label><@label key='modifyDateTime.C,colon'>修改日期从：</@label></label>
	                <input type="text" class="date" readonly="readonly" size="17"  max_Date="{maxModifyDateTime}" name="minModifyDateTime" value="${condition.minModifyDateTime!''}"/>
	                <a class="inputDateButton" href="javascript:;">选择</a>
	            </li>
	            <li>    
	                <label><@label key="to.C,colon">至：</@label></label>
	                <input type="text" class="date" readonly="readonly" size="17" min_Date="{minModifyDateTime}" name="maxModifyDateTime"  value="${condition.maxModifyDateTime!''}"/>
	                <a class="inputDateButton" href="javascript:;">选择</a>
	            </li>
	        </ul>
			<ul class="searchContent">
	            <li>
	            	<label><@label key='customer.C,colon'>客户：</@label></label> 
	            	<input type="text" name="customer" value="${condition.customer!''}"/>
	            </li>
	            <li>
	            	<label><@label key='customerOrder.C,colon'>客户订单：</@label></label> 
	            	<input type="text" name="customerOrder" value="${condition.customerOrder!''}"/>
	            </li>
	            <li>
	            	<label><@label key='priority.C,colon'>优先级：</@label></label> 
	            	<input type="text" name="priority" value="${condition.priority!''}"/>
	            </li>
	        </ul>
		</div>
	</div>
</form>
<div class="panel">
	<h1 style="text-align: left;"><@label key="graph.D">图表</@label></h1>
	<div id="chartContent" class="poStatus" layoutH="118">
		<div layoutH="150" style="float: left; display: block; margin-left: 10px; min-height: 330px;">
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;">
					<@label	key="orderStatus.C">订单状态</@label>
					</h1>
				</div>
				<table class="orderStateTable" id="orderStateTable" width="388px">
					<thead>
						<tr>
							<th width="30%"><@label key="orderStatus.C">订单状态</@label></th>
							<th width="30%"><@label key="quantity.C">数量</@label></th>
							<th width="30%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					<tbody>
						<#if controlStatusCode??> <#list controlStatusCode as ecode>
						<tr>
							<td><a name="controlStatusName" class="link"
								status="${ecode.eCode!''}">${ecode.eCodeText!''}</a></td>
							<td name="controlStatusCount">${controlStatusMap[ecode.eCode]!0}</td>
							<td>
							<#if controlStatusMap.totalCount == 0>
								0%
							<#else>
								${((controlStatusMap[ecode.eCode]!0)/controlStatusMap.totalCount)?string.percent}
							</#if>
							
							</td>
			
						</tr>
						</#list> <#else>
						<tr>
							<td style="text-align: center;" class="noData">
								<div style="color: #e9573f;">======<@label
									key="noListData.C">列表无数据</@label>=====</div>
							</td>
						</tr>
						</#if>
					</tbody>
				</table>
			</div>
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;"><@label
						key="unexpectCompletedOrder.C">未预期完工的订单</@label></h1>
				</div>
				<table class="orderStateTable" id="unConfirmOrderTable" width="98%">
					<thead>
						<tr>
							<th width="40%"><@label key="quantity.C">数量</@label></th>
							<th width="40%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					</thead>
					<tbody>
					  	<tr>
							<td><a href="javascript:void(0);" class="link"
								id="UncompletedOrderQuantity">${controlStatusMap['uncompleteCount']!0}</a>
							</td>
							<td>
							<#if controlStatusMap.totalCount == 0>
								0%
							<#else>
								${((controlStatusMap['uncompleteCount']!0)/controlStatusMap.totalCount)?string.percent}
							</#if>
							
							</td>
						</tr>
					  </tbody>
				</table>
			</div>
		</div>
		<div style="margin-left: 446px; padding: 10px;">
			<div id="chartHolder" style="width: 450px; height: 360px;" ></div>
		</div>
	</div>
</div>
<script type="text/javascript">
(function($){
	var $page = DWZ.context(),
	orderStatusJSONData = JSON.parse('<#noescape>${orderStatusJSON!"[]"}</#noescape>'),
	statusdata = new Array(),
	statusName = new Array(),
	axisLine = { //图表坐标轴线
  		show: true,
  		lineStyle: {
  			color: '#666',
  			type: 'solid',
  			width: 1
  		}
  	},
  	viewProductionOrders = function(status, text) {
		var $form = $("form[name='ProductionControlStatesCondition']", $page),
		data = $form.serialize(),
		path = hostUrl
			+ "/productionControlStatus/viewProductionControlByStatus?"
			+ data,
		title = "逾期完工";
		if (status) {
			title = text;
			path += ('&status=' + status);
		}
		$.pdialog.open(path, '', title, {
			width : 860,
			height : 560,
			minable : false,
			mask : true,
			resizable : false
		});
	};
	
	$('td a[name=controlStatusName]', $page).on('click', function(){
		var $this = $(this);
		viewProductionOrders($this.attr('status'), $this.text());
		return false;
	}).each(function(){
		statusName.push($(this).text());
	});
	
	$('#UncompletedOrderQuantity', $page).on('click', function(){
		viewProductionOrders($(this).attr('status'));
		return false;
	});
	
	$("td[name='controlStatusCount']", $page).each(function(){
		statusdata.push($(this).text());
	});
	
	var ops = {
		color : [ '#93d1f8', '#dea2ad' ],
		title : {
			text : '<@label key="productionOrderStatus.C">订单状态</@label>',
			x : 'center',
			textStyle : {
				fontSize : 12,
				color : '#666'
			}
		},
		tooltip : {
			trigger : 'item'
		},
		grid : {
			borderWidth : 0,
			left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
		},
		animation : false,
		xAxis : [ {
			type : 'category',
			show : true,
			axisLabel : {
				show : true
			},
			axisLine : axisLine,
		} ],
		yAxis : [ {
			type : 'value',
			show : true,
			axisLine : axisLine
		} ],
		series : [ {
			type : 'bar',
			itemStyle : {
				normal : {
					label : {
						show : true,
						symbol : 'diamond',
						position : 'top',
						formatter : '{c}',
						textStyle : {
							fontSize : 12,
							color : '#71c76e',
						}
					},
				}
			},
			markPoint : {
				tooltip : {
					trigger : 'item',
					backgroundColor : 'rgba(0,0,0,0)',
				},
				data : []
			}
		} ],
		noDataLoadingOption : {
			text : "<@label key='productionOrderStatus.C,noData.C'>订单状态暂无数据</@label>",
			effect : 'whirling',
		}
	};

	require.config({
		paths : {
			echarts : '${rc.getContextPath()}/manage/js/echarts'
		}
	});

	require([ 'echarts', 'echarts/chart/bar' ], function(ec) {
		var myChart = ec.init($('#chartHolder', $page)[0]);
		ops.xAxis[0].data = statusName;
		ops.series[0].data = statusdata;
		myChart.setOption(ops, true);
		var imgData = myChart.getDataURL();
	});
	
	var $collapsablePanel = $("#collapsablePanel", $page),
	$chartContent = $('#chartContent', $page),
	contentHeight = $chartContent.height(),
	$advancedQuery = $('.advancedQuery', $page).on('click', function(){
		if ($collapsablePanel.is(':animated')) {
			return false;
		}
		
		var status = '',contentHeight = $chartContent.height();
		
		if ($collapsablePanel.is(':visible')) {
			$collapsablePanel.slideUp();
			status = "close";
			$(this).removeClass('expand');
			$chartContent.animate({
				height: contentHeight + 131
			}).attr({layoutH: 118});
		} else {
			$collapsablePanel.slideDown();
			status = "open";
			$(this).addClass('expand');
			$chartContent.animate({
				height: contentHeight - 131
			}).attr({layoutH: 249});
		}
		$('#advancedStatus', $page).val(status);
	});
	
	if ($('#advancedStatus', $page).val() == 'open') {
		$collapsablePanel.show();
		$advancedQuery.addClass('expand');
		$chartContent.attr({layoutH: 249});
	}
})(jQuery);
</script>
